<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件传值2</title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<counter :count="count" msg="myMsg" @count-add="aaaa"></counter>
		</div>
	</body>
</html>
<script>
	// 父子组件的传值是单向的，子组件不能修改父组件的值
	const app = Vue.createApp({
		data() {
			return{
				count:20,
			}
		},
		methods:{
			aaaa(result){
				this.count = result;
			}
		}
	});
	app.component('counter',{
		props: {
			count: {
				type: Number,
				default: 20
			},
		},
		methods:{
			changeCount(){
				// 子组件向父组件传递事件
				this.$emit('countAdd', this.count + 1);
			}
		},
		mounted() {
			// 当子组件不接受参数时，vue自动将参数处理为属性
			console.log(this.$attrs.count);
		},
		template:`<div @click="changeCount">子组件的count：{{count}}</div>`
		// template:`<div @click="changeCount"></div><div :msg="$attrs.msg"></div>`
	})
	const vm = app.mount("#app")
</script>